<template>
  <div class="setDealer">
    <!-- 设置经销商 -->
    <el-button
        style="color:#0B9AC3;border:none;"
        icon="el-icon-setting"
        circle
        @click="dialogDealerMethod"
    ></el-button>
    <el-dialog
      title="设置经销商"
      :visible.sync="dialogDealer"
      width="520px"
      :before-close="handleClose"
    >
        <el-form>
            <el-form-item>
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="复选框 A"></el-checkbox>
                    <el-checkbox label="复选框 B"></el-checkbox>
                    <el-checkbox label="复选框 C"></el-checkbox>
                    <el-checkbox label="复选框 d"></el-checkbox>
                    <el-checkbox label="复选框 e"></el-checkbox>
                    <el-checkbox label="复选框 f"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button size="mini" type="primary" @click="dialogDealer = false">保 存</el-button>
              <el-button size="mini" @click="dialogDealer = false">取 消</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name:'setDealer',
    data(){
        return {
            // 弹窗控制
            dialogDealer:false,
            // 多选框选中内容
            checkList: ['选中且禁用','复选框 A']
        }
    },
    methods:{ 
        // 关闭窗口
        handleClose(done) {
        this.$confirm("确认关闭？")
            .then(_ => {
            done();
            })
            .catch(_ => {});
        },
        //点击弹窗事件
        dialogDealerMethod(){
            this.dialogDealer= true

        }
    }

}
</script>

<style lang='scss'scoped>
.setDealer{
    .el-form{
        .el-checkbox-group{
            .el-checkbox{
                display: block;
                text-align: left;
            }
        }
        /deep/.el-button{
            text-align: left;
        }
    }
}

</style>